<div class="l-control-bar">
    <a class="s-button t-export icon-download labeled"
       ng-click="exportAsCSV()"
       title="Export This View's Data">
        Export
    </a>
</div>
<div class="mct-table-headers-w" mct-scroll-x="scroll.x">
    <table class="mct-table l-tabular-headers filterable"
                ng-style="{
                    'max-width': totalWidth
                }">
        <thead>
            <tr>
                <th ng-repeat="header in displayHeaders"
                    ng-style="{
                        width: columnWidths[$index] + 'px',
                        'max-width': columnWidths[$index] + 'px',
                    }"
                    ng-class="[
                        enableSort ? 'sortable' : '',
                        sortColumn === header ? 'sort' : '',
                        sortDirection || ''
                    ].join(' ')"
                    ng-click="toggleSort(header)">
                    {{ header }}
                </th>
            </tr>
            <tr ng-if="enableFilter" class="s-filters">
                <th ng-repeat="header in displayHeaders"
                    ng-style="{
                        width: columnWidths[$index] + 'px',
                        'max-width': columnWidths[$index] + 'px',
                    }">
                    <div class="holder l-filter flex-elem grows"
                        ng-class="{active: filters[header]}">
                        <input type="text"
                                ng-model="filters[header]"/>
                        <a class="clear-icon clear-input icon-x-in-circle"
                           ng-class="{show: filters[header]}"
                           ng-click="filters[header] = undefined"></a>
                    </div>
                </th>
            </tr>
        </thead>
    </table>
</div>
<table class="mct-sizing-table t-sizing-table"
    ng-style="{
        width: calcTableWidthPx
    }">
    <tbody>
        <tr>
            <td ng-repeat="header in displayHeaders">{{header}}</td>
        </tr>
        <tr><td ng-repeat="header in displayHeaders" >
            {{sizingRow[header].text}}
        </td></tr>
    </tbody>
</table>
<div class="l-tabular-body t-scrolling vscroll--persist" mct-resize="resize()" mct-scroll-x="scroll.x">
    <div class="mct-table-scroll-forcer"
         ng-style="{
        width: totalWidth
    }"></div>
    <table class="mct-table"
           ng-style="{
            height: totalHeight + 'px',
            'max-width': totalWidth
            }">
        <tbody>
            <tr ng-repeat-start="visibleRow in visibleRows track by $index"
                ng-if="visibleRow.rowIndex === toiRowIndex"
                ng-style="{ top: visibleRow.offsetY + 'px' }"
                class="l-toi-tablerow">
                <td colspan="999">
                    <mct-include key="'time-of-interest'"
                                 class="l-toi-holder pinned"></mct-include>
                </td>
            </tr>
            <tr ng-repeat-end
                ng-style="{ top: visibleRow.offsetY + 'px' }"
                ng-click="table.onRowClick($event, visibleRow.rowIndex)">
                <td ng-repeat="header in displayHeaders"
                    ng-style="{
                        width: columnWidths[$index] + 'px',
                        'max-width': columnWidths[$index] + 'px',
                    }"
                    class="{{visibleRow.contents[header].cssClass}}">
                    {{ visibleRow.contents[header].text }}
                </td>
            </tr>
        </tbody>
    </table>
</div>
